import React, { useEffect, useRef, useLayoutEffect } from 'react'

const moveTo = (dom, delay, option) => {
  dom.style.transform = `translate(${option.x}px)`
  dom.style.transition = `all ${delay}ms ease-in`
}

export default function UseLayoutEffectTest() {
  const divRef = useRef(null)

  useEffect(
    () => {
      moveTo(divRef.current, 500, {x: 100})
    },
    []
  )

  return (
    <div>
      <div 
        ref={divRef}
        style={{width: '100px', height: '100px', backgroundColor: 'red'}}
      >方块</div>
    </div>
  )
}